<template>
  <div class="my-information">
    <el-row>
      <el-col :span="24">
        <p class="base-information-style">基本信息</p>
      </el-col>
      <el-form :model="form"
               :disabled="status==='detail'"
               label-width="80px"
               :rules="userInfoFormRules"
               ref="userInfoForm">
        <el-col :span="24"
                class="mid-space">
          <el-col :span="12"
                  id="modifyImg">
            <el-form-item class="user-tyle"
                          label="头像"
                          prop="img"
                          style="width:100%!important;">
              <!-- <div id="imgLogo"
                   class="mid-img-size">
                <img :src="form.img"
                     alt="" />
              </div> -->
              <el-upload v-if="status==='edit'"
                         class="avatar-upload"
                         :http-request="uploadAvatar"
                         action=""
                         :show-file-list="false"
                         :on-success="handleAvatarSuccess"
                         :before-upload="beforeAvararUpload">
                <img :src="form.avatar_url"
                     v-if="form.avatar_url"
                     class="logo">
                <i v-else
                   class="el-icon-plus logo-uploader-icon"></i>
              </el-upload>
              <img :src="form.avatar_url"
                   v-if="status==='detail'"
                   class="default-logo">
            </el-form-item>
            <el-form-item label="真实姓名"
                          prop="user_name"
                          class="mid-usually-style">
              <el-input v-model="form.user_name"
                        class="mid-usually-style"></el-input>
            </el-form-item>

            <el-form-item label="岗位"
                          prop="job_name"
                          class="mid-usually-style">
              <el-input v-model="form.job_name"
                        disabled
                        class="mid-usually-style"></el-input>
            </el-form-item>
            <el-form-item id="loginPassword"
                          label="手机号"
                          prop="phone"
                          class="mid-usually-style">
              <el-input v-model="form.phone"
                        class="mid-usually-style"></el-input>
            </el-form-item>

          </el-col>
        </el-col>
      </el-form>
      <el-col :sapn="12"
              class="footer-box">
        <el-button type="primary"
                   v-if="status==='detail'"
                   @click="onEdit">编辑</el-button>
        <el-button v-if="status==='edit'"
                   @click="cancelEdit">取消</el-button>
        <el-button type="primary"
                   v-if="status==='edit'"
                   @click="updateUserInfo">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { personalCenterApi } from '@/services/PersonalCenter'
import { UploadFileApi } from '@/services/UserPermission'
export default {
  data () {
    return {
      uuid: this.$route.query.uuid,
      form: {
        realname: '',
        category: '',
        mobile: '',
        avatar: '',
        avatar_url: '',
        usertype: '',
        usernickname: ''
      },
      // 暂存用户信息，为了在取消编辑状态时重置到初始状态
      tempForm: {

      },
      fileList3: [],
      dialogFormVisible: false,
      // 修改密码的formInline声明
      formInline: {
        oldpassword: '',
        newpassword: '',
        repeatpassword: ''
      },
      rules: {
        oldpassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
        newpassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        repeatpassword: [{ required: true, message: '重复密码不能为空', trigger: 'blur' }]
      },
      // 表单验证规则
      userInfoFormRules: {
        user_name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { required: true, message: '请输入真实姓名', trigger: 'change' }
        ],

        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { required: true, message: '请输入手机号', trigger: 'change' },
          { min: 11, max: 11, message: '请输入有效的手机号码', trigger: 'blur' }
        ]
      },
      user_id: '',
      // 处于编辑状态还是显示状态
      status: 'detail'
    }
  },
  methods: {
    handleAvatarSuccess () {

    },
    beforeAvararUpload () {

    },
    // 上传头像
    uploadAvatar (file) {
      let formData = new FormData()
      formData.append('module', 'industry')
      formData.append('pic_file_apk', file.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        if (res.data) {
          this.form.avatar = res.data.file_name
          this.form.avatar_url = res.data.file_path
        }
        console.log(this.form, 'upload file')
      })
    },
    // 编辑事件
    onEdit () {
      // this.$router.push({ path: 'modifyInformation', query: { uuid: this.uuid } })
      this.status = 'edit'
    },
    // 取消编辑状态
    cancelEdit () {
      this.status = 'detail'
      this.form = JSON.parse(JSON.stringify(this.tempForm))
    },
    // 编辑用户信息
    updateUserInfo () {
      this.$refs.userInfoForm.validate(valid => {
        if (valid) {
          personalCenterApi.updateUserInfo({
            data: this.form
          }).then(res => {
            console.log(res, 'update res')
            if (res.code === 0) {
              this.$message.success('修改成功')
              this.status = 'detail'
              this.getData()
            }
          }, err => {
            console.log(err)
          })
        }
      })
    },

    // 获取用户数据信息
    getData () {
      personalCenterApi.getUserInfo({
        data: {
          user_id: this.user_id
        }
      }).then((res) => {
        this.form = res.data
        let jobList = []
        this.form.job_data.map((item) => {
          jobList.push(item.job_name)
        })
        this.form.job_name = jobList.join(',')
        this.tempForm = JSON.parse(JSON.stringify(this.form))
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    let local = window.localStorage.getItem('userInfo')
    this.user_id = JSON.parse(local).user_id
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.mid-space {
  margin-top: 20px;
}
.footer-box {
  padding-top: 20px;
  width: 100% !important;
  text-align: center;
}
.mid-usually-style {
  width: 100% !important;
}
.mid-img-size {
  width: 120px;
  height: 120px;
}
.user-tyle {
  /deep/ .el-form-item__label {
    text-align: right !important;
    float: left;
    margin-top: 40px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(51, 51, 51, 1) !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 40px !important;
  }
}
#imgLogo {
  width: 120px;
  height: 120px;
  img {
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;
    border-radius: 60px !important;
  }
}
.my-information {
  /deep/ .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 86% !important;
  }
  padding: 20px;
  .default-logo {
    width: 178px;
    height: 178px;
    display: block;
  }
}
#loginPassword {
  /deep/ .el-input-group__append button.el-button,
  /deep/ .el-input-group__append div.el-select .el-input__inner,
  /deep/ .el-input-group__append div.el-select:hover .el-input__inner,
  /deep/ .el-input-group__prepend button.el-button,
  /deep/ .el-input-group__prepend div.el-select .el-input__inner,
  /deep/ .el-input-group__prepend div.el-select:hover .el-input__inner {
    border-color: transparent;
    background-color: white !important;
    color: #1890ff;
    border-top: 0;
    border-bottom: 0;
  }
  /deep/ .el-input-group__append button.el-button:hover {
    border: 1px solid #1890ff !important;
  }
}

.base-information-style {
  font-size: 18px;
  font-family: SimSun;
  font-weight: 400;
  color: rgba(20, 65, 179, 1);
}
#modifyImg {
  .el-form-item__label {
    text-align: right;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
.footer-col {
  padding-top: 20px;
  width: 100% !important;
  text-align: center;
}

.avatar-upload {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    border-color: #409eff;
  }
  .logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .logo {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
